<template>
  <header class="login-header">
    <div class="container">
        <div class="bar">
          <ul>
            <li>
              <RouterLink to="/">回到首页</RouterLink>
            </li>
            <li><a href="javascript:;">免费注册</a></li>
            <li><a href="javascript:;">我的订单</a></li>
            <li><a href="javascript:;">会员中心</a></li>
            <li><a href="javascript:;">帮助中心</a></li>
            <li><a href="javascript:;">关于我们</a></li>
          </ul>
        </div>
      <h1 class="logo">
        <RouterLink to="/">龙卷风书城</RouterLink>
      </h1>
      <h3 class="sub">
        <slot>书像一阵风 读完还想读 这样的节奏 谁都无可奈何~</slot>
      </h3>
      <RouterLink class="entry" to="/">
        进入官网首页
        <i class="iconfont icon-angle-right"></i>
        <i class="iconfont icon-angle-right"></i>
      </RouterLink>
    </div>
  </header>
</template>

<script>
export default {
  name:'LoginHeader'
}
</script>

<style lang="less" scoped>
.login-header{
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  .container{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .bar{
      position: absolute;
      width:110%;
      top:0;
      right:-10px;
      background-color: #333;
      ul {
          display: flex;
          width: 100%;
          height: 53px;
          justify-content: flex-end;
          align-items: center;
          li {
            a {
              padding: 0 15px;
              color: #cdcdcd;
              line-height: 1;
              display: inline-block;
              i {
                font-size: 14px;
                margin-right: 2px;
              }
              &:hover {
                color: @shopColor;
              }
            }
            ~li {
              a {
                border-left: 2px solid #666;
              }
            }
          }
        }
    }
  }

  .logo{
    width: 160px;
    height: 140px;
    margin-top: 60px;
    a{
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url("../../../assets/images/logo.png") no-repeat center / contain;
    }
  }
    .sub {
      flex: 1;
      font-size: 18px;
      font-weight: normal;
      margin-bottom: 10px;
      margin-left: 460px;
      font-style: italic;
      color: #666;
    }

    .entry {
      width: 120px;
      margin-bottom: 10px;
      font-size: 16px;
      &:hover{
        color:@shopColor;
      }
      i {
        font-size: 14px;
        color: @shopColor;
        letter-spacing: -5px;
      }
    }
  }
</style>
